import classNames from "classnames";
import { type FC } from "react";
import { useDebounceFn, useMemoizedFn } from "ahooks";
import { produce } from "immer";
import contentStyle from "../../index.module.scss";
import styles from "./index.module.scss";
import ApplyAccentColor from "./applyAccentColor";
import ColorItem from "./colorItem";
// import { useCustomizationStore, usePersonalDetailsStore } from "@/store";
import { updateCustomization } from "@/service";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { usePersonalDetailStore } from "@/src/providers/personal-detail-store-provider";

interface IndexProps {}

const Index: FC<IndexProps> = () => {
  const { updateColors, addCustomization, customization } =
    useCustomizationStore(
      (state) => state,
      (o, n) => {
        return (
          o.customization.layout.detailsPosition ===
            n.customization.layout.detailsPosition &&
          o.customization.colors === n.customization.colors
        );
      }
    );

  const { personalDetails } = usePersonalDetailStore(
    (state) => state
    // (o, n) => {
    //   return o.personalDetails.id === n.personalDetails.id;
    // }
  );

  const { colors, layout } = customization;
  const { mode } = colors;

  const updateValue = (params) => {
    return updateCustomization({
      ...params,
    });
  };
  const { run } = useDebounceFn(
    (data) => {
      updateValue({
        updates: [
          {
            path: data.path,
            value: data.value,
          },
        ],
        id: customization.id,
      });
    },
    {
      wait: 1000,
    }
  );
  const onChange = useMemoizedFn((key1, key2, v) => {
    const data = produce(customization.colors, (draft) => {
      draft[key1][key2] = v;
    });
    if (customization.id) {
      run({
        path: `colors.${key1}.${key2}`,
        value: v,
      });
    } else if (personalDetails.id) {
      updateColors(data);
      addCustomization(personalDetails.id);
      return;
    }
    updateColors(data);
  });
  return (
    <div className={classNames(styles.colors, contentStyle.card)}>
      <h1 className={contentStyle.title} style={{ marginBottom: "30px" }}>
        色彩
      </h1>
      {mode !== "simple" ? (
        <div className={styles.colorBodyWrapper}>
          <div className={styles.direction}>
            {layout.detailsPosition === "top"
              ? "上"
              : layout.detailsPosition === "left"
              ? "左"
              : "右"}
          </div>
          <div className={styles.colorBody}>
            <div className={styles.colorItem}>
              <div>文字颜色</div>
              <ColorItem
                onChange={(color) => {
                  onChange("light", "textColor", color);
                }}
                color={colors.light.textColor}
                style={{ left: "0px" }}
              ></ColorItem>
            </div>
            <div className={styles.colorItem}>
              <div>背景颜色</div>
              <ColorItem
                onChange={(color) => {
                  onChange("light", "backgroundColor", color);
                }}
                color={colors.light.backgroundColor}
                style={{ left: "-90px" }}
              ></ColorItem>
            </div>
            <div className={styles.colorItem}>
              <div>点缀颜色</div>
              <ColorItem
                onChange={(color) => {
                  onChange("light", "accentColor", color);
                }}
                color={colors.light.accentColor}
                style={{ left: "-175px" }}
              ></ColorItem>
            </div>
          </div>
        </div>
      ) : null}

      <div className={styles.colorBodyWrapper}>
        {mode !== "simple" ? (
          <div className={styles.direction}>
            {layout.detailsPosition === "top"
              ? "下"
              : layout.detailsPosition === "left"
              ? "右"
              : "左"}
          </div>
        ) : null}

        <div className={styles.colorBody}>
          <div className={styles.colorItem}>
            <div>文字颜色</div>
            <ColorItem
              onChange={(color) => {
                onChange("strong", "textColor", color);
              }}
              color={colors.strong.textColor}
              style={{ left: "0px" }}
            ></ColorItem>
          </div>
          <div className={styles.colorItem}>
            <div>背景颜色</div>
            <ColorItem
              onChange={(color) => {
                onChange("strong", "backgroundColor", color);
              }}
              color={colors.strong.backgroundColor}
              style={{ left: "-90px" }}
            ></ColorItem>
          </div>
          <div className={styles.colorItem}>
            <div>点缀颜色</div>
            <ColorItem
              onChange={(color) => {
                onChange("strong", "accentColor", color);
              }}
              color={colors.strong.accentColor}
              style={{ left: "-175px" }}
            ></ColorItem>
          </div>
        </div>
      </div>
      <ApplyAccentColor style={mode === "simple" ? { marginLeft: 0 } : {}} />
    </div>
  );
};

export default Index;
